<!-- 内网IP -->
<template>
  <div id="liveAnchorList">
    <div class="border_bottom">
      <span class="title_span">基础管理 / 内网IP</span>
    </div>
    <div>
      <el-form :inline="true" label-position="left">
        <div class="mT10 text-align-right">
          <el-form-item label="IP">
            <el-input v-model="form.ip" clearable placeholder="请输入IP" style="width:230px"></el-input>
          </el-form-item>
          <div style="float:right">
            <el-button type="primary" @click="btnPageList" icon="my-search" class="mL57">查询</el-button>
            <el-button type="primary" @click="btnReset" icon="my-spinner11">重置</el-button>
            <el-button @click="addIpDialog" icon="my-search" class="mL30">添加IP</el-button>
          </div>
        </div>
      </el-form>

      <el-dialog title="添加IP" :visible.sync="addDialogFormVisible" width="65%">
        <el-form :model="addForm" ref="addForm" label-width="80px">
          <el-form-item label="IP">
            <el-input v-model="addForm.ip"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel('addForm')">取 消</el-button>
          <el-button type="primary" @click="btnAdd">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="编辑IP" :visible.sync="editDialogFormVisible" width="65%">
        <el-form :model="editForm" ref="editForm" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="editForm.ip"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="btnCancel('editForm')">取 消</el-button>
          <el-button type="primary" @click="btnEdit">确 定</el-button>
        </span>
      </el-dialog>

      <el-row>
        <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false" style="width: 100%">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="ip" label="IP地址"></el-table-column>
          <el-table-column prop="createUserName" label="创建人姓名"></el-table-column>
          <el-table-column prop="updateUserName" label="修改人姓名"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" :formatter="$$$dateFormat"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" :formatter="$$$dateFormat"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="editIpDialog(scope.row)">编辑</el-button>
              <el-button type="text" @click="btnDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {liveBasicAPI} from "@/api/index";

  export default {
    data() {
      return {
        loginUser: {
          uid: this.$root.uid,
          username: this.$root.username,
          email: this.$root.email
        },
        loadingTableData: false,
        loading: false,
        form: {
          ip: null,
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
        addDialogFormVisible: false,
        addForm: {
          ip: "",
          anchorCode: "",
          anchorDepart: "",
          anchorInfo: "",
        },
        rules: {
          ip: [{required: true, message: "IP不能为空"}]
        },
        tableData: [], //列表
        editDialogFormVisible: false,
        editForm: {
          ip: "",
        },
      };
    },
    created: function () {
      //初始化主播列表数据
      this.btnPageList();
    },
    computed: {
      uploadDisabled: function () {
        return this.anchorImg.length > 0;
      },
    },
    methods: {
      //每页显示条数更改
      handleSizeChange(pageSize) {
        this.form.pageSize = pageSize;
        this.btnPageList();
      },
      //跳转、下一页等
      handleCurrentChange(pageIndex) {
        this.form.pageIndex = pageIndex;
        this.btnPageList();
      },
      //打开添加弹框
      addIpDialog() {
        this.addDialogFormVisible = true;
        setTimeout(() => {
          __punch.to(
            this.$refs.dialog,
            this.loginUser.username + this.loginUser.email,
            {}
          );
        }, 200);
        this.resetForm("addForm");
      },
      //取消按钮
      btnCancel(form) {
        if (form == "addForm") {
          this.addDialogFormVisible = false;
        } else {
          this.editDialogFormVisible = false;
        }
        this.resetForm(form);
      },
      //重置
      btnReset() {
        this.form.ip = "";
        this.form.pageIndex = 1;
        this.btnPageList();
      },
      //查询
      btnPageList() {
        this.loadingTableData = true;
        //请求后台
        liveBasicAPI.getLiveIpList(
          this.form,
          res => {
            if (res) {
              this.loadingTableData = false;
              //赋值
              this.tableData = res.records;
              this.form.total = res.total;
              this.form.pageIndex = res.page.pageIndex;
              this.form.pageSize = res.page.pageSize;
            }
          },
          () => {
            this.loadingTableData = false;
          }
        );
      },
      //添加
      btnAdd() {
        //校验表单
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            let param = {
              ip: this.addForm.ip,
            };
            //请求后台
            liveBasicAPI.addLiveIp(param, res => {
              if (res) {
                this.addDialogFormVisible = false;
                this.btnPageList();
                this.btnReset();
                this.resetForm("addForm");
                this.messageSuccess("添加成功！");
              } else {
                this.messageError("添加失败！");
              }
            });
          } else {
            //校验失败
            return false;
          }
        });
      },
      //打开编辑弹框
      editIpDialog(row) {
        this.editForm = JSON.parse(JSON.stringify(row));
        this.editDialogFormVisible = true;
      },
      //编辑
      btnEdit(editForm) {
        //校验表单
        this.$refs["editForm"].validate(valid => {
          if (valid) {
            let param = {
              id: this.editForm.id,
              ip: this.editForm.ip
            };
            //请求后台
            liveBasicAPI.updateLiveIp(param, res => {
              if (res) {
                this.editDialogFormVisible = false;
                this.btnPageList();
                this.messageSuccess("修改成功！");
              } else {
                this.messageError("修改失败！");
              }
            });
          } else {
            //校验失败
            return false;
          }
        });
      },
      //删除
      btnDel(info) {
        this.$confirm("确认删除该IP?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            if (!info.id) {
              this.messageError("参数错误,Id不能为空");
            }
            let param = {
              id: info.id,
            };
            liveBasicAPI.deleteLiveIp(
              param,
              res => {
                if (res) {
                  this.btnReset();
                  this.messageSuccess("删除成功");
                }
              },
              () => {
                this.messageError("操作失败");
              }
            );
          })
          .catch((err) => {
            if('cancel' == err){
              this.messageInfo('操作已取消')
            }else{
              console.error(err)
            }
          });
      },
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields();
        });
      },
      messageWarn(message) {
        this.$message({showClose: true, type: "warning", message: message});
      },
      messageSuccess(message) {
        this.$message({showClose: true, type: "success", message: message});
      },
      messageError(message) {
        this.$message({showClose: true, type: "error", message: message});
      },
      messageInfo(message) {
        this.$message({showClose: true, type: "info", message: message});
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mL57 {
    margin-left: 57px !important;
  }

  .el-tag {
    background-color: rgba(255, 255, 255, 0.2);
    border: 0px;
  }

  .top {
    margin-top: 20px;
    /* margin-left:20px; */
    padding: 20px;
    border: none;
    border-radius: 0px;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  }

  .border_bottom {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgb(231, 228, 235);
  }

  .title_span {
    font-size: 14px;
    color: #666
  }
</style>
